<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米手机品类列表</title>
  </head>
  <style>
    body, ul {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    a {
      text-decoration: none;
    }
    .page-main {
      padding: 50px 0;
      background-color: #f5f5f5;
    }
    .container {
      width: 1226px;
      /* height: 700px; */
      margin: 0 auto;
      border: 1px solid blue;
    }
    .product-hot {
      width: 234px;
      height: 614px;
      background-color: bisque;
      float: left;
    }
    .product-list {
      width: 992px;
      height: 614px;
      background-color:antiquewhite;
      float: right;
    }
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
    .product-list ul {
      /* border: 1px solid wheat; */
    }
    .product-list ul li {
      width: 234px;
      height: 300px;
      float: left;
      margin-left: 14px;
      margin-bottom: 14px;
      background-color:#fff;
      /* border: 1px solid salmon; */
    }
    .product-list ul li:nth-last-child(1) {
      height: 143px;
    }
    .product-list ul li:nth-last-child(2) {
      height: 143px;
    }
    .product-list ul li a {
      width: 234px;
      display: block;
      height: inherit;
      border: 1px solid aqua;
    }
  </style>
  <body>
    <div class="page-main">
      <div class="container clearfix">
        <div class="product-hot">
          <a href="">
            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9895c56a7b792fb9053e3085fc261072.jpg" alt="" width="234">
          </a>
        </div>
        <div class="product-list">
          <ul class="clearfix">
            <li><a href="">123</a></li>
            <li><a href="">123</a></li>
            <li><a href="">123</a></li>
            <li><a href="">123</a></li>
            <li><a href="">123</a></li>
            <li><a href="">123</a></li>
            <li><a href="">123</a></li>
            <li><a href="">123</a></li>
            <li><a href="">123</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>
